<template>
  <div style="margin: -8px -10px">
    <div class="disFlxAC">
      <a-card title="待办事项" :bordered="false" class="br-10 cardBox" :bodyStyle="{ padding: '10px' }">
        <div class="disFlx backlogBox">
          <div
            v-for="(item, index) in backlogList"
            :key="index"
            class="disFlxCC grid grid-backlog backlog"
            @click="item.fn"
          >
            <div class="fz-15 _pb-5">{{ item.label }}</div>
            <div class="total fw-6 fz-24 _pt-5">
              <CountUp :delay="delay" :endVal="item.value" :options="options" />
            </div>
          </div>
        </div>
      </a-card>

      <a-card title="会员数据" :bordered="false" class="br-10 _ml-20 cardBox" :bodyStyle="{ padding: '10px' }">
        <div class="disFlx backlogBox">
          <div
            v-for="(item, index) in memberData"
            :key="index"
            class="disFlxCC grid grid-memberData backlog"
            @click="item.fn"
          >
            <div class="fz-15 _pb-5">{{ item.label }}</div>
            <div class="total fw-6 fz-24 _pt-5">
              <CountUp :delay="delay" :endVal="item.value" :options="options" />
            </div>
          </div>
        </div>
      </a-card>
    </div>
    <a-card title="用户数据总览" :bordered="false" class="br-10 _mt-15" :bodyStyle="{ padding: '10px' }">
      <div class="disFlx">
        <div
          v-for="(item, index) in dataOverviewList"
          :key="index"
          class="disFlxCC grid"
          :class="{ borderLeft: !!index }"
          style="flex: 1"
        >
          <div>{{ item.label }}</div>
          <div class="fz-24 fw-6 linh-28 _pt-4 _pb-4">
            <span>{{ item.now }}</span>
            <a-icon v-if="item.now > 0" type="arrow-up" class="_ml-5 fz-12 increase" />
            <a-icon v-else type="arrow-down" class="_ml-5 fz-12 decline" />
          </div>
          <div class="linh-28 fz-14">
            <span>较昨日</span>
            <span class="_pl-5" :class="item.compareYesterday > 0 ? 'increase' : 'decline'">
              <CountUp
                :delay="delay"
                :endVal="item.compareYesterday"
                :options="{
                  ...options,
                  prefix: item.compareYesterday > 0 ? '+' : ''
                }"
              />
            </span>
          </div>
          <div class="linh-28 fz-14">
            <span>较上周</span>
            <span class="_pl-5" :class="item.compareLastWeek > 0 ? 'increase' : 'decline'">
              <CountUp
                :delay="delay"
                :endVal="item.compareLastWeek"
                :options="{
                  ...options,
                  prefix: item.compareLastWeek > 0 ? '+' : ''
                }"
              />
            </span>
          </div>
          <div class="linh-28 fz-14">
            <span>较上月</span>
            <span class="_pl-5" :class="item.compareLastMonth > 0 ? 'increase' : 'decline'">
              <CountUp
                :delay="delay"
                :endVal="item.compareLastMonth"
                :options="{
                  ...options,
                  prefix: item.compareLastMonth > 0 ? '+' : ''
                }"
            /></span>
          </div>
        </div>
      </div>
    </a-card>

    <a-card :bordered="false" class="br-10 _mt-15" :bodyStyle="{ padding: '10px 0px 0px 0px' }">
      <template slot="title">
        <div class="disFlxAC">
          <div>会员数据统计</div>
          <a-popover v-model="dimensionalityShow" trigger="click" placement="bottom">
            <template slot="content">
              <div>月</div>
            </template>
            <span class="increase fz-14 _pl-20 _pr-20">月<a-icon type="down" class="fz-12 _ml-5"/></span>
          </a-popover>
        </div>
      </template>
      <div>
        <LineChart />
      </div>
    </a-card>
    <DashboardGuide></DashboardGuide>
  </div>
</template>

<script>
import LineChart from './components/lineChart'
import CountUp from 'vue-countup-v2'
import { checkPermission } from '@/utils/authority'
import { Backlog, UserData } from '@/api/home/workplace'
import DashboardGuide from './components/DashboardGuide.vue'

export default {
  components: {
    LineChart,
    CountUp,
    DashboardGuide
  },
  data() {
    return {
      delay: 0,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        suffix: ''
      },
      backlogList: [
        {
          key: 'membershipReview',
          label: '入会审核',
          value: 0,
          fn: () => {
            if (checkPermission('member:approval:join')) {
              this.$router.push({
                path: '/member/approval',
                query: {
                  menuKey: 'join'
                }
              })
            } else {
              this.$message.warning('抱歉，您暂无此页面访问权限')
            }
          }
        },
        {
          key: 'renewalAudit',
          label: '续费审核',
          value: 0,
          fn: () => {
            if (checkPermission('member:approval:renew')) {
              this.$router.push({
                path: '/member/approval',
                query: {
                  menuKey: 'renew'
                }
              })
            } else {
              this.$message.warning('抱歉，您暂无此页面访问权限')
            }
          }
        },
        {
          key: 'dataChange',
          label: '资料变更审核',
          value: 0,
          fn: () => {
            if (checkPermission('member:approval:source')) {
              this.$router.push({
                path: '/member/approval',
                query: {
                  menuKey: 'source'
                }
              })
            } else {
              this.$message.warning('抱歉，您暂无此页面访问权限')
            }
          }
        },
        {
          key: 'activityRegistration',
          label: '活动报名审核',
          value: 0,
          fn: () => {
            this.$router.push({
              path: '/activity/activityList'
            })
          }
        },
        {
          key: 'activityCooperationInvitation',
          label: '活动合作邀请',
          value: 0,
          fn: () => {
            this.$router.push({
              path: '/activity/activityAudit'
            })
          }
        },
        {
          key: 'interpersonalMatchmaking',
          label: '人脉审核',
          value: 0,
          fn: () => {
            this.$router.push({
              path: '/business/people/peopleApproval'
            })
          }
        }
      ],
      memberData: [
        {
          key: 'memberNum',
          label: '会员总数',
          value: 0,
          fn: () => {
            this.$router.push({
              path: '/member/headquartersList'
            })
          }
        },
        {
          key: 'interimMember',
          label: '临期会员',
          value: 0,
          fn: () => {
            this.$router.push({
              path: '/member/paymentManage',
              query: { paymentStatus: 2 }
            })
          }
        },
        {
          key: 'expiredMember',
          label: '过期会员',
          value: 0,
          fn: () => {
            this.$router.push({
              path: '/member/paymentManage',
              query: { paymentStatus: 3 }
            })
          }
        },
        {
          key: 'exitMember',
          label: '退会会员',
          value: 0,
          fn: () => {
            this.$router.push({
              path: '/member/exit'
            })
          }
        }
      ],
      dataOverviewList: [],
      // dataOverviewList: [
      //   {
      //     key: 'userNum',
      //     label: '累计用户',
      //     now: 0,
      //     compareYesterday: 0,
      //     compareLastWeek: 0,
      //     compareLastMonth: 0,
      //   },
      //   {
      //     key: 'memberNum',
      //     label: '会员总数',
      //     now: 0,
      //     compareYesterday: 0,
      //     compareLastWeek: 0,
      //     compareLastMonth: 0,
      //   },
      //   {
      //     key: 'nonmemberNum',
      //     label: '非会员',
      //     now: 0,
      //     compareYesterday: 0,
      //     compareLastWeek: 0,
      //     compareLastMonth: 0,
      //   },
      // ],
      dimensionalityShow: false,
      option: {
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
          {
            data: [10, 22, 28, 23, 19],
            type: 'line',
            smooth: true
          }
        ]
      }
    }
  },
  methods: {
    async getBacklog() {
      let res = await Backlog()
      this.backlogList = this.backlogList.map(item => {
        return {
          ...item,
          value: res.data[item.key] || 0
        }
      })

      this.memberData = this.memberData.map(item => {
        return {
          ...item,
          value: res.data[item.key] || 0
        }
      })
    },
    async getUserData() {
      let list = [
        {
          key: 'userNum',
          label: '累计用户',
          now: 0,
          compareYesterday: 0,
          compareLastWeek: 0,
          compareLastMonth: 0
        },
        {
          key: 'memberNum',
          label: '累计会员',
          now: 0,
          compareYesterday: 0,
          compareLastWeek: 0,
          compareLastMonth: 0
        },
        {
          key: 'nonmemberNum',
          label: '非会员',
          now: 0,
          compareYesterday: 0,
          compareLastWeek: 0,
          compareLastMonth: 0
        }
      ]

      let res = await UserData()
      let data = res.data
      Object.keys(data).forEach(k => {
        this.dataOverviewList = list.map(item => {
          item[k] = data[k][item.key]
          return {
            ...item
          }
        })
      })
    },
    info() {
      const h = this.$createElement
      this.$info({
        title: '管理提示',
        content: h('div', {}, [
          h('p', '本项审核仅可通过小程序审核，请前往您的小程序，找到【个人中心】-【合作管理】页面进行审核。')
        ]),
        onOk() {}
      })
    }
  },
  mounted() {
    this.getBacklog()
    this.getUserData()
  }
}
</script>

<style lang="less" scoped>
.total {
  color: orange;
}
.increase {
  color: #87d068;
}
.decline {
  color: red;
}
.backlogBox {
  flex-wrap: wrap;
}
.grid {
  width: 25%;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 25px 0;
}
.grid.borderLeft {
  position: relative;
  &::before {
    position: absolute;
    left: 0;
    content: ' ';
    width: 1px;
    height: 100%;
    background-color: #e8e8e8;
  }
}
.backlog:hover {
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.grid-backlog {
  width: 33.3%;
}

.grid-memberData {
  width: 50%;
}

.cardBox {
  flex: 1;
}
</style>
